<template>
	<scroll-view scroll-y @scrolltolower="handleToLower" class="album_scroll_view">
		<view class="album_swiper">
			<swiper autoplay indicator-dots circular>
				<swiper-item
					v-for="item in banner"
					:key="item.id">
					<image :src="item.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
	
		<!-- 专辑列表 -->
		<view class="album_list">
			<navigator class="album_item"
				v-for="item in album"
				:key="item.id"
				:url="`/pages/album/index?id=${item.id}`">
				<view class="album_l">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_r">
					<view class="album_r_title">{{item.name}}</view>
					<view class="album_r_desc">{{item.desc}}</view>
					<view class="album_r_btn">
						<view>+关注</view>
					</view>
				</view>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				limit: 30,
				order: "new",
				skip: 0
			},
			// 轮播图数组
			banner: [],
			// 列表数组
			album: [],
			// 是否还有分页数据
			hasMore: true
		}
	},
	mounted() {
		// 修改页面的标题
		uni.setNavigationBarTitle({
			title: "专辑"
		})
		this.getList()
	},
	methods: {
		// 获取接口的数据
		async getList() {
			const {res} = await this.$request({
				url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
				data: this.params
			})
			if (this.banner.length === 0) {
				this.banner = res.banner
			}
			if (res.album.length < this.params.limit) {
				this.hasMore = false
				return
			}
			this.album = [...this.album, ...res.album]
		},
		// 上拉事件
		handleToLower() {
			if (this.hasMore) {
				this.params.skip += this.params.limit
				this.getList()
			} else {
				uni.showToast({
					title: '没有数据了',
					icon: "none"
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.album_scroll_view {
	height: calc(100vh - 36px);
}
.album_swiper {
	height: cala(750rpx / 2.3);
	image {
		height: 100%;
	}
}
.album_list {
	padding: 10rpx;
	.album_item {
		padding: 15rpx 0;
		display: flex;
		border-bottom: 2rpx solid #eee;
		.album_l {
			flex: 1;
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		.album_r {
			flex: 2;
			overflow:hidden;
			.album_r_title {
				font-size: 30rpx;
				font-weight: 600;
				padding: 10rpx 0;
			}
			.album_r_desc {
				font-size: 25rpx;
				color: #000000;
				padding: 20rpx 0;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.album_r_btn {
				display: flex;
				justify-content: flex-end;
				padding: 20rpx 0 10rpx;
				view {
					padding: 5rpx 10rpx;
					color: $color;
					border: 1rpx solid $color;
				}
			}
		}
	}
}
</style>
